<template>
  <div>
    <el-tabs v-model="activeTab" @tab-change="fetchData">
      <el-tab-pane label="未审核" name="pending"></el-tab-pane>
      <el-tab-pane label="已审核" name="approved"></el-tab-pane>
    </el-tabs>

    <el-table :data="verificationList" border style="width: 100%">
      <el-table-column prop="applyDate" label="申请日期" width="120" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="schoolName" label="学校名称" width="150" />
      <el-table-column prop="degree" label="学历" width="120" />
      <el-table-column prop="graduationDate" label="毕业时间" width="150" />
      <el-table-column label="学历证书" width="120">
        <template #default="scope">
          <img
            :src="scope.row.certificatePath"
            alt="学历证书"
            style="width: 60px; height: auto; cursor: pointer"
            @click="openImageDialog(scope.row.certificatePath)"
          />
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="120">
        <template #default="scope">
          <span>{{
            scope.row.isApproved === true
              ? "通过"
              : scope.row.isApproved === false
              ? "未通过"
              : "未审核"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="不通过原因" width="200">
        <template #default="scope">
          <span>{{ scope.row.rejectionReason || "无" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <template v-if="activeTab === 'pending'">
            <el-button
              type="success"
              @click="approveVerification(scope.row.userId)"
            >
              通过
            </el-button>
            <el-button
              type="danger"
              @click="showRejectDialog(scope.row.userId)"
            >
              不通过
            </el-button>
          </template>
          <template v-else>
            <!-- 已审核状态下的按钮显示逻辑 -->
            <el-button
              v-if="scope.row.isApproved === true"
              type="danger"
              @click="showRejectDialog(scope.row.userId)"
            >
              不通过
            </el-button>
            <el-button
              v-else
              type="success"
              @click="approveVerification(scope.row.userId)"
            >
              重新通过
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 图片放大弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      width="50%"
      :before-close="closeImageDialog"
    >
      <img :src="currentImage" alt="放大图" style="width: 100%" />
    </el-dialog>

    <!-- 拒绝原因输入框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="输入拒绝原因"
      :before-close="handleRejectDialogClose"
    >
      <el-input
        type="textarea"
        v-model="rejectionReason"
        placeholder="请输入拒绝的原因"
        rows="4"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRejectionReason"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getPendingEducationVerification,
  getApprovedEducationVerification,
  approveEducationVerification,
  rejectEducationVerification,
} from "@/api/audit";

export default {
  name: "EducationVerification",
  data() {
    return {
      activeTab: "pending", // 默认选中未审核
      verificationList: [],
      dialogVisible: false, // 控制图片放大弹窗显示
      currentImage: "", // 存储当前点击的图片路径
      rejectDialogVisible: false, // 控制拒绝原因弹窗显示
      rejectionReason: "", // 存储拒绝的原因
      currentUserId: null, // 存储当前操作的用户ID
    };
  },
  methods: {
    // 根据tab加载数据
    fetchData() {
      this.verificationList = [];
      if (this.activeTab === "pending") {
        getPendingEducationVerification().then((response) => {
          if (response.data) {
            this.verificationList = response.data.map((item) => ({
              applyDate: new Date(
                item.educationVerification.CreatedAt
              ).toLocaleString(),
              userId: item.user.ID,
              username: item.user.nickname || item.user.username || "未知用户",
              schoolName: item.educationVerification.schoolName,
              degree: item.educationVerification.degree,
              graduationDate: item.educationVerification.graduationDate,
              certificatePath:
                import.meta.env.VITE_BASE_API +
                item.educationVerification.certificatePath,
              isReviewed: item.educationVerification.isReviewed,
              isApproved: item.educationVerification.isApproved,
              rejectionReason: item.educationVerification.rejectionReason || "",
            }));
          }
        });
      } else {
        getApprovedEducationVerification().then((response) => {
          console.log(response.data);
          if (response.data) {
            this.verificationList = response.data.map((item) => ({
              applyDate: new Date(
                item.educationVerification.CreatedAt
              ).toLocaleString(),
              userId: item.user.ID,
              username: item.user.nickname || item.user.username || "未知用户",
              schoolName: item.educationVerification.schoolName,
              degree: item.educationVerification.degree,
              graduationDate: item.educationVerification.graduationDate,
              certificatePath:
                import.meta.env.VITE_BASE_API +
                item.educationVerification.certificatePath,
              isReviewed: item.educationVerification.isReviewed,
              isApproved: item.educationVerification.isApproved,
              rejectionReason: item.educationVerification.rejectionReason || "",
            }));
          }
        });
      }
    },

    // 打开图片弹窗
    openImageDialog(imagePath) {
      this.currentImage = imagePath;
      this.dialogVisible = true;
    },

    // 关闭图片弹窗
    closeImageDialog() {
      this.dialogVisible = false;
      this.currentImage = "";
    },

    // 显示拒绝原因输入框
    showRejectDialog(userId) {
      this.currentUserId = userId;
      this.rejectDialogVisible = true;
    },

    // 关闭拒绝原因输入框
    handleRejectDialogClose() {
      this.rejectionReason = ""; // 清空输入框内容
    },

    // 提交拒绝原因
    submitRejectionReason() {
      if (!this.rejectionReason) {
        this.$message.error("请填写拒绝原因");
        return;
      }
      rejectEducationVerification({
        userId: this.currentUserId,
        rejectionReason: this.rejectionReason,
      }).then(() => {
        this.fetchData();
        this.rejectDialogVisible = false; // 关闭弹窗
        this.$message.error("已驳回审核");
      });
    },

    // 审核通过
    approveVerification(userId) {
      approveEducationVerification({ userId }).then(() => {
        this.fetchData();
        this.$message.success("已通过审核");
      });
    },

    // 审核不通过
    rejectVerification(userId) {
      rejectEducationVerification({ userId }).then(() => {
        this.fetchData();
        this.$message.error("已驳回审核");
      });
    },
  },

  mounted() {
    this.fetchData(); // 页面加载时获取初始数据
  },
};
</script>

<style scoped>
/* 样式定义 */
</style>
